<template>
  <button
    class="button"
    :class="className"
    :style="{ backgroundColor: backColor, width: width, color: color, fontSize: fontSize }"
    v-debounce="{ fn: event }"
  >{{ info }}</button>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

defineProps({
  info: {
    type: String,
    required: true,
  },
  className: {
    type: String,
  },
  backColor: {
    type: String,
    default: "#707070",
  },
  width: {
    type: String,
    default: "150px",
  },
  event: {
    type: Function,
  },
  color: {
    type: String,
    default: 'white'
  },
  fontSize: {
    type: String,
    default: '20px'
  }
});
</script>

<style lang="scss">
.button {
  cursor: pointer;
  height: 40px;
  border-radius: 15px;
  font-weight: bold;
  border: 1px solid #707070;
}
</style>
